/*
  @author wn
  @date 2022/04/15 10:17:45
  @description: 项目介绍 http://zhoushugang.gitee.io/erabbit-client-pc-document/

  函数 返回 css 代码
  还可以传参数

  .abc(@width){
    width: width;
    height: width;
  }

  .box{
    .abc(100px);
  }

  只有box 编译   abc为函数 不编译
  导入
  @import "mixins.less";
  每一次使用需要导入--自动化导入--style-resources-loader
  步骤
  1 安装 插件 vue add style-resources-loader
  选择 less
  2 vue.config.js 中  哪些文件自动导入 使用绝对路径


  // 主题
  @xtxColor: #27ba9b;

  =============================================
  通用样式
  1 normalize.css
  npm i normalize.css

  2 自定义重置样式代码 公用样式代码
  common.less

  3 main.js 中导入
  import 'normalize.css'
  import '@/assets/styles/common.less'

  4 variables.less  mixins.less
  避免使用前必须导入一次

  vue add style-resources-loader   安装 vueCli 插件

  vue.config.js 中  哪些文件自动导入 使用绝对路径

	pluginOptions: {
		'style-resources-loader': {
			preProcessor: 'less',

    	   哪些文件自动导入 使用绝对路径
			   使用 path.join 来拼接完整路径

			patterns: [
				path.join(__dirname, './src/assets/styles/variables.less'),
				path.join(__dirname, './src/assets/styles/mixins.less'),
			],
		},
	},
  =============================================

  字体图标
  阿里巴巴图标库
  1 public/index.html 中引入
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">

  使用 -- <i class="iconfont icon-phone"></i>   i 就是该图标

  修改 该图标的样式 伪类选择器
    .iconfont::before {
			font-size: 12px;
			position: relative;
			top: -2px;
		}

  ==============================================

  less 中
  ~~~~~~     ~ 选择器作用: 选择当前选择器 后面的所有元素
  四个 li 当前第一个  ~ li  指的是 后面三个
  整体 指的是 后面 3个li
   li {
    ~ li {
       a{
      color: red;
    }
    }
  }

  & 当前元素  可以拼接
  father{
    &-sun{}
  }
  father-sun

  1 :deep() 空格   改样式一般在组件内部改
  某个深层元素 或其他深层样式时，需要使用

  没有作用域时 当使用其他封装好的组件时 更改 该组件 内 子组件  css样式  会改变该组件样式
  所有使用的地方都会修改
  :deep(.box){ }  可以解决这个问题
  这样只会在自己使用的地方修改 样式

  2 修改插槽过来的组件的样式：这就需要用到:slotted()
    <style scoped>
    :slotted(.box) {
    color:blue
   }
   </style>

 3 全局样式 通常都是新建一个style 标签 不加scoped 现在有更优雅的解决方案
   <style lang="less" scoped>
   :global(.box){
    color:red
  }
  </style>


  ==========================

  css 中  使用响应式  数据  动态改变样式  比如换主题

  const color = ref('red')

  p {
  color: v-bind('color');
 }

 @click='color = pink'

  ==========================

  px----vw

  1 npm install postcss-px-to-viewport-8-plugin -S
  2 在项目根目录新建一个 postcss.config.js文件
   module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-px-to-viewport-8-plugin': {
      unitToConvert: 'px', // 需要转换的单位，默认为"px"
      viewportWidth: 375, // 设计稿的视口宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ['*'], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
      // 下面配置表示类名中含有'keep-px'都不会被转换
      selectorBlackList: ['keep-px'],
      minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
      replace: true, //  是否直接更换属性值，而不添加备用属性
      exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换
      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: 'vw', // 横屏时使用的单位
      landscapeWidth: 1338 // 横屏时使用的视口宽度
    }
  }
}

*/
